<template>
	<view class="password-view">
		<view class="global-display global-a-items form-item">
			<text class="label">邮箱</text>
			<input class="input" type="text" v-model="email" placeholder="请填写邮箱" placeholder-style="color:#999999" :maxlength="64">
		</view>
		<view class="global-display global-a-items form-item">
			<text class="label">验证码</text>
			<input class="input" type="text" v-model="code" placeholder="请输入验证码" placeholder-style="color:#999999" :maxlength="6">
			<button class="send-btn" size="mini" :disabled="codeDisabled" @click="sendCode">{{codeName}}</button>
		</view>
	</view>
	<view class="password-view">
		<view class="global-display global-a-items form-item">
			<text class="label">新密码</text>
			<input class="input" type="safe-password" password v-model="password" placeholder="6-20位大小写字母+数字组成" placeholder-style="color:#999999" :maxlength="20">
		</view>
		<view class="global-display global-a-items form-item" :class="{'is-error': showPasswordMismatch}">
			<text class="label">确认密码</text>
			<input class="input" type="safe-password" password v-model="newPassword" placeholder="再次输入新密码" placeholder-style="color:#999999" :maxlength="20">
		</view>
	</view>
	<!-- 提示 -->
	<view class="password-tips">{{errNewpassword}}</view>
	<button @click="subMit" :loading="loading" :disabled="subDisabled" class="sum-mit">提交</button>
</template>

<script setup lang="ts">
	import { ref, watchEffect, computed } from 'vue';
	import {sendCodeAPI, setPasswordAPI} from '@/api/login'
	const email = ref('')//手机号
	const code = ref('')//验证码
	const password = ref('')//密码
	const newPassword = ref('')//确认密码
	const showPasswordMismatch = computed(() => newPassword.value.length > 0 && password.value !== newPassword.value)
	/* -------发送验证码-------- */
	const codeDisabled = ref(false);
	const countdownTime = ref(60);//倒计时时间
	const codeName = ref('发送验证码')
	// 发送验证码
	async function sendCode(){
		// 调用发送验证码接口
		const res = await sendCodeAPI(email.value)
		// 倒计时开始
		codeDisabled.value = true
		var timer = setInterval(()=>{
			if(countdownTime.value > 1){
				countdownTime.value--
				codeName.value = `${countdownTime.value}秒后重新获取`
			}else{
				clearInterval(timer);
				codeDisabled.value = false
				countdownTime.value = 60
				codeName.value = '发送验证码'
			}
		},1000)
	}
	// 校验表
	const errNewpassword = ref('')
	const subDisabled = ref(false)
	watchEffect(()=>{
		// 验证密码是否一致
		if (password.value === newPassword.value) {
		    errNewpassword.value = ''
			subDisabled.value = false
		} else {
			errNewpassword.value = '两次输入的密码不一致'
			subDisabled.value = true
		}
	})
	// loading
	const loading = ref(false)
	// 提交更新
	async function subMit(){
		try{
			loading.value = true
			await setPasswordAPI(email.value, code.value, password.value)
			loading.value = false
			uni.navigateBack({delta: 1})
		}catch(e){
			loading.value = false
		}
	}
</script>

<style>
	page{
		background-color: #f6f7f9;
	}
	.password-view{
		margin: 10rpx 20rpx 60rpx 20rpx;
		background-color: #ffffff;
		padding: 0 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
	}
	.form-item{
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f1f2f4;
	}
	.password-view .form-item:last-child{
		border-bottom: none;
	}
	.password-view text{
		width: 150rpx;
		font-size: 32rpx;
	}
	.label{
		width: 150rpx;
		font-size: 30rpx;
		color: #666666;
	}
	.password-view input{
		flex: 1;
		padding: 0 10rpx;
	}
	.input{
		flex: 1;
		padding: 18rpx 20rpx;
		background-color: #f7f8fa;
		border: 2rpx solid transparent;
		border-radius: 12rpx;
		transition: border-color .2s;
	}
	.form-item.is-error .input{
		border-color: #ff4d4f;
	}
	.password-view button{
		background-color: #f9dc53;
		border: none;
	}
	.send-btn{
		background-color: #f9dc53;
		color: #333333;
		border: none;
		border-radius: 10rpx;
		padding: 0 20rpx;
		height: 56rpx;
		line-height: 56rpx;
	}
	.send-btn[disabled]{
		background-color: #eaecef;
		color: #9aa1a9;
	}
	.sum-mit{
		background-color: #f9dc53;
		width: 400rpx;
		margin-top: 40rpx;
		border: none;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		box-shadow: 0 6rpx 16rpx rgba(249,220,83,0.35);
	}
	.sum-mit[disabled]{
		opacity: .6;
	}
	.password-tips{
		padding-left: 20rpx;
		font-size: 30rpx;
		color: red;
	}
</style>